
<template>
  <div class="risk-content">
    <eagle-page-list
      :controller="controller"
      :queryParams="queryParams"
      @bindData="bindData"
      :conditions="conditions"
      ref="eaglePageList"
    >
      <template #list>
        <div class="plan-list">
          <div
            class="plan-detail mb-10"
            v-for="(item, index) in list"
            :key="index"
            @click="_goDetail(item)"
          >
            <div class="plan-history-hd">
              <!-- <img
								:src="item.Cover.indexOf('http')?baseUrl+item.Cover:item.Cover"
								alt=""
							/> -->
              <eagle-image
                width="60px"
                height="60px"
                class="image-box-shadow"
                fit="cover"
                :src="item.Cover"
              />
              <div class="mt-5 plan-detail-r">
                <div class="plan-detail-title mb-10">{{ item.ResName }}</div>
                <div class="plan-detail-time">
                  最近学习时间：{{ item.EditDate || "" }}
                </div>
                <div class="current-progress mt-10">
                  <eagle-progress
                    style="width: 85%"
                    :show-pivot="false"
                    :percentage="item.CurrentProgress"
                    :color="item.CurrentProgress == 100 ? '#07c160' : '#1989fa'"
                  />
                  <div>{{ item.CurrentProgress }}%</div>
                </div>
              </div>
            </div>

            <eagle-tag type="primary" class="tags">{{ item.AttExt }}</eagle-tag>
          </div>
        </div>
      </template>
    </eagle-page-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
      list: [],
      conditions: {},
      controller: "/TrainRes",
      queryParams: {
        dataType: "StudyRecordNew",
      },
      CurrentProgress: 60,
    };
  },

  created() {},
  methods: {
    bindData(data) {
      this.list = [];
      if (data) {
        this.list = data;
      }
    },
    // 详情
    _goDetail(item) {
      var url =
        "/Train/WareDetail?id=" +
        item.ID +
        "&sid=" +
        item.SID +
        "&stype=" +
        item.SType;
      this.$router.push(url);
    },
  },
};
</script>

<style lang="less" scoped>
.risk-content {
  background-color: #e8f1f8;
  min-height: 100vh;
  .info_search {
    padding: 10px;
    border-radius: 5px !important;
    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}

.plan-detail {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  padding: 10px;
  color: #333;
  font-size: 10px;
  position: relative;
  .tags {
    position: absolute;
    top: 10px;
    right: 0;
    border-radius: 26.64rem 0 0 26.64rem;
  }
}

.plan-history-hd {
  display: flex;
  justify-content: space-between;
  // img {
  // 	width: 70px;
  // 	height: 70px;
  // 	margin-right: 10px;
  // }
  .plan-detail-title {
    font-size: 14px;
    color: #000;
  }
  span {
    color: #666;
  }
}

.plan-detail-time {
  font-size: 12px;
  color: #666;
}
.plan-detail-r {
  width: 260px;
}
.current-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
</style>